<template>
  <div>
    <h1>人脸认证</h1>
    <el-form ref="dataForm" :rules="formRules" :model="entity" @submit.prevent>
      <el-form-item v-if="principalType == 'username'" prop="username">
        <j-input-wrapper>
          <el-input
            ref="usernameInput"
            v-model="entity.username"
            placeholder="用户名"
            @keyup.enter="openFaceCamera"
          />
        </j-input-wrapper>
      </el-form-item>

      <br />
      <el-image
        :src="require('@/assets/image/faceLogin.png')"
        @click="openFaceCamera"
      />

      <el-dialog
        v-model="faceCamera.visible"
        title="人脸认证图像采集"
        :close-on-click-modal="false"
        append-to-body
        center
        custom-class="faceCameraDialog"
        @open="
          $nextTick(() => {
            $refs.faceCamera.tracking()
          })
        "
        @close="$refs.faceCamera.stop()"
      >
        <j-face-camera
          ref="faceCamera"
          v-model="faceCamera.value"
          @capture="captureHandler"
        />
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import { faceLogin, bindDevice } from '@/api/login'

export default {
  name: 'FaceLogin',
  emits: ['captcha', 'login-success'],
  data() {
    return {
      entity: {
        deviceUid: null,
        username: null,
        userType: 'ADMIN',
      },
      principalType: 'deviceUid',
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
      },
      loginLoading: false,
      faceCamera: {
        visible: false,
        value: null,
      },
    }
  },
  computed: {
    device() {
      return this.$store.getters.device
    },
  },
  methods: {
    openFaceCamera() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.faceCamera.visible = true
        }
      })
    },
    captureHandler(faceImage) {
      if (this.loginLoading) {
        return
      }

      this.loginLoading = true
      this.entity.deviceUid = this.device.deviceUid
      faceLogin(this.entity, faceImage)
        .then((res) => {
          this.faceCamera.visible = false

          if (res.data.resultCode == 1000) {
            this.principalType = 'username'
            this.$message.error(res.data.message)
          } else if (res.data.resultCode == 200) {
            if (this.principalType == 'username') {
              this.$confirm(
                '登录成功，是否在此设备开启免账号登录',
                '设备绑定',
                {
                  confirmButtonText: '是',
                  cancelButtonText: '否',
                  type: 'success',
                  callback: (action) => {
                    if (action == 'confirm') {
                      bindDevice(null, this.device).then(() => {
                        this.$message.success('开启成功')
                        this.$emit('login-success')
                      })
                    } else {
                      this.$emit('login-success')
                    }
                  },
                }
              )
            } else {
              this.$message.success('登录成功')
              this.$emit('login-success')
            }
          } else {
            this.$message.error(res.data.message)
          }
        })
        .finally(() => {
          this.loginLoading = false
        })
    },
  },
}
</script>
<style lang="scss">
.faceCameraDialog {
  width: 680px;
}
</style>
